<template>
    <div>
        <div class="searchLayout mainLayout whiteBg flex flexBetween alignCenter">
            <div class="searchSty">
                <div class="flex pb10 alignCenter">
                    <div class="mr10">门店</div>
                    <div class="selectSty  flex flexBetween" >哈哈 <span class="u-arrow up"></span></div>
                </div>
                
                <div class="flex alignCenter">
                    <div class="mr10">款色</div>
                    <input type="text" placeholder="请填写款色" />
                </div>     
            </div>
            <div class="line"></div>
            <div class="btn fontSize14">搜索</div>
        </div>
        <div class="mainLayout sizeContent whiteBg mt20">
            <div class="flex w100 fontSize14">
                <div class="w50 center pt10 pb10 blueBgs">尺寸</div>
                <div class="w50 center pt10 pb10 blueBgs">申请补货数量</div>
            </div>
            <div class="flex w100">
                <div class="w50 center pt10 pb10 blueBorder">XS</div>
                <div class="w50 center pt10 pb10 blueBorder"><input type="number" placeholder="请输入数量" /> </div>
            </div>
        </div>
        <div class="mainLayout mt20">
            <textarea placeholder="请填写补货理由" cols="30" rows="6" class="wd100"></textarea>
        </div>
        <div class="flex flexBetween btmSty alignCenter mainLayout">
            <div class="saveBtn center" @click="goSave">提交申请</div>
        </div>
         <van-popup v-model="isPiker" round position="bottom">
            <van-picker
                title="标题"
                show-toolbar
                :value-key="keyname"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
            />
        </van-popup>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog } from 'vant';
export default{
    name:'addSupplier',
    data(){
        return{
            isPiker:false,
            keyname:'',
            columns:[]
        }
    },
    methods:{
        onConfirm(){

        },
        onCancel(){

        },
        onChange(){

        }
    }
}
</script>
<style lang='less' scoped>
.wrapper{
    background-color: #eee;
    padding: 0.4rem 0;
}
.w50{width: 50%;}
.mainLayout{
    width: 90%;
    margin: 0 auto;
}
.mt20{margin-top: 0.4rem;}
.searchLayout{
    
    padding: 0.4rem;
    border-radius: 0.1rem;
    .searchSty{
        .selectSty{
            // border: 1px #ddd solid;
            width: 3.2rem;
            padding: 0.1rem 0.2rem;
            border-bottom: 1px #ddd solid;
        }
        .u-arrow{
            display: inline-block;
            width: 0.18rem;
            height: 0.18rem;
            border-top: 1px #ddd solid;
            border-right: 1px #ddd solid;
            margin-left: 0.1rem;
            position: relative;
            top: 0.08rem;
        }
        .up{
            transform: rotate(135deg);
        }
        
        input{
            width: 3.2rem;
            border: 0;
            border-bottom:1px #ddd solid;
            padding: 0.1rem 0;
        }
    }
    .line{
            width: 1px;
            height: 1rem;
            background-color: #eee;
            margin-bottom: 0.3rem;
            position: relative;
            top: 0.2rem;
        }
    .btn{
        border: 1px #5372c0 solid;
        color: #5372c0;
        // background-color: #eee;
        padding: 0.06rem 0.2rem;
        border-radius: 0.1rem;
    }
}
.sizeContent{
    padding: 0.4rem;
    border-radius: 0.1rem;
    input{
        width: 2rem;
        border: 1px rgba(72, 115, 193, 0.1) solid;
    }
    .blueBgs{
        background-color: rgba(72, 115, 193, 0.1);
    }
    .blueBorder{
        border:1px  rgba(72, 115, 193, 0.1) solid
    }
}
textarea{
    border: 0;
    border-radius: 0.1rem;
    padding: 0.2rem;
}
.btmSty{
    position: fixed;
    left: 50%;
    bottom: 0.6rem; 
    width: 90%;
    transform: translateX(-50%);
    .saveBtn{
        width: 100%;
        background-color: #4873c1;
        color: #fff;
        padding: 0.2rem 1rem;
        border-radius: 0.4rem;
    }
}

</style>
